<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="1" style="margin-right:0px;">
				<p class="queryLabel">入库类型:</p>
			</el-col>
			<el-col :span="4" style="margin-right: 0px;">
				<el-select size="small" v-model="carSelect.status" placeholder="请选择入库类型状态" clearable>
					<el-option v-for="item in saleType" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="margin-right:0px;">
				<p class="queryLabel">仓库:</p>
			</el-col>
			<el-col :span="4" style="margin-right: 0px;">
				<el-select size="small" v-model="carSelect.warehouse" placeholder="请选择仓库" clearable>
					<el-option v-for="item in warehouseType" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="">
				<p class="queryLabel">车系:</p>
			</el-col>
			<el-col :span="3">
				<el-input placeholder="请选择车系" size="small" icon="search" v-model="carModelCode" :on-icon-click="handleIconClick">
				</el-input>
			</el-col>
			<el-col :span="1" style="text-align: left;">
				<p class="queryLabel">车辆型号:</p>
			</el-col>
			<el-col :span="3">
				<el-select size="small" style="width: 100%;" v-model="carSelect.carModelCode" placeholder="请选择型号" clearable @change="changeModel">
					<el-option v-for="item in modelCombo" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" style="">
				<p class="queryLabel">车辆配置:</p>
			</el-col>
			<el-col :span="3">
				<el-select size="small" style="width: 100%;" v-model="carSelect.carConfigureCode" placeholder="请选择配置" clearable>
					<el-option v-for="item in configCombo" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="1" style="margin-right: 6px;">
				<p class="queryLabel">采购日期:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker v-model="data.firstStart" size="small" style="width:92%;" type="date" clearable placeholder="采购日期">
				</el-date-picker>
			</el-col>
			<el-col :span="1" style="margin-right: 5px;">
				<p class="queryLabel">至:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker v-model="data.firstStarts" size="small" style="width:92%;" type="date" clearable placeholder="采购日期">
				</el-date-picker>
			</el-col>
			<el-col :span="1" style="">
				<p class="queryLabel">提单号:</p>
			</el-col>
			<el-col :span="3">
				<el-input placeholder="请输入提单号" style="width: 90%;" size="small" v-model="carSelect.orderNum">
				</el-input>
			</el-col>
			<el-col :span="1" style="text-align: left;margin-left: 7px;">
				<p class="queryLabel">VIN:</p>
			</el-col>
			<el-col :span="3">
				<el-input placeholder="请输入VIN" size="small" style="width: 88%; " v-model="carSelect.vin">
				</el-input>
			</el-col>
			<el-col :span="1" style="">
				<p class="queryLabel">销售状态:</p>
			</el-col>
			<el-col :span="3">
				<el-select size="small" style="width: 85%;" v-model="carSelect.saleFlag" placeholder="请选择配置" clearable>
					<el-option v-for="item in saleCombo" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="22" style="padding-left: 0px;text-align: right">
				<el-button type="primary" size="small" v-on:click='query'>查 询</el-button>
				<el-button type="primary" size="small" @click="clean">清空查询条件</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table :data="tableData.dataList" border style="width: 100%;align-content: center;" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="60">
					</el-table-column>
					<el-table-column prop="vin" label="VIN" width="180">
					</el-table-column>
					<el-table-column prop="carSeries" label="车系名称" width="100">
					</el-table-column>
					<el-table-column prop="purchaseDate1" label="采购日期" width="120">
					</el-table-column>
					<el-table-column prop="purchaseNum" label="采购单号" width="100">
					</el-table-column>
					<el-table-column prop="carModelCode" label="车型代码" width="100">
					</el-table-column>
					<el-table-column prop="modelName" label="车型名称" width="150">
					</el-table-column>
					<el-table-column prop="configureCode" label="配置代码" width="150">
					</el-table-column>
					<el-table-column prop="configureName" label="配置名称" width="150">
					</el-table-column>
					<el-table-column prop="status" label="是否已售" width="100" :formatter="saleFlagCov">
					</el-table-column>
					<el-table-column prop="carModelYear" label="车型年" width="100">
					</el-table-column>
					<el-table-column prop="appearanceCode" label="外观代码" width="100">
					</el-table-column>
					<el-table-column prop="appearanceName" label="外观颜色" width="120">
					</el-table-column>
					<el-table-column prop="trimCode" label="内饰代码" width="100">
					</el-table-column>
					<el-table-column prop="trimName" label="内饰名称" width="100">
					</el-table-column>
					<el-table-column prop="chooseCode" label="加装代码" width="100">
					</el-table-column>
					<el-table-column prop="chooseName" label="加装名称" width="100">
					</el-table-column>
					<el-table-column prop="distributionDate" label="配货日期" width="120">
					</el-table-column>
					<el-table-column prop="sendDate" label="发货日期" width="120">
					</el-table-column>
					<el-table-column prop="oldNum" label="提单号" width="100">
					</el-table-column>
					<el-table-column prop="distributionStatus" label="配货状态" width="100">
					</el-table-column>
					<el-table-column prop="validateStatus" label="验车单打印状态" width="100" :formatter="validatePrintCov">
					</el-table-column>
					<el-table-column label="操作" align="right" width="130">
						<template scope="scope">
							<el-button type="primary" size="mini" @click.native.prevent="infos(scope.$index)">价格变更记录</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>
		<el-dialog title="价格变更记录" v-model="editComFormShowL" size="tiny">
			<el-col :span="24">
				<el-table :data="sList" border style="width: 100%;align-content: center;" >
					<el-table-column prop="date" label="时间" width="150">
					</el-table-column>
					<el-table-column prop="invoicesPrice" label="金额">
					</el-table-column>
					<el-table-column prop="invoicesType" label="类型" :formatter="typeCov">
					</el-table-column>
				</el-table>
			</el-col>

		</el-dialog>
		<carserice :show="showStart" v-if="showStart" v-on:close="showStart=false" v-on:insert="insert"></carserice>
	</div>
</template>
<script>
	import carserice from '../../insPlugins/carSeries.vue'
	import moment from 'moment'
	export default {
		data: function() {
			return {
				//待打印车辆
				prientFormShow: false,
				//日期查询条件
				data: {
					firstStart: "",
					firstStarts: ""
				},
				//日期查询条件初始值
				datas: {
					firstStart: "",
					firstStarts: ""
				},
				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,
				//仓库类型下拉
				warehouseType: [],

				//合格证状态
				certificateStatusCovertData: {},

				//车辆销售状态下拉
				saleType: [{
					label: '采购入库',
					value: '1'
				}, {
					label: '调拨入库',
					value: '3'
				}, {
					label: '销售退车入库',
					value: '2'
				}],

				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,
				//公司数据
				tableData: {
					total: 0,
					dataList: []
				},

				condition: {
					enterType: "",
					carModel: "",
					wareHouse: "",
					enterTimeStart: "",
					enterTimeStop: "",
				},
				//查询条件
				carSelect: {
					//销售状态
					saleType: "",
					//车辆状态 
					status: "",
					//初次入库起
					enterWarehouseDateStart: "",
					//初次入库止 
					enterWarehouseDateStop: "",
					//车系代码
					carSeriesCode: "",
					//车型代码 
					carModelCode: "",
					//配置代码
					carConfigureCode: "",
					//仓库
					warehouse: "",
					//vin
					vin: "",
					saleFlag:"",
					//打印状态
					//financeType: "0",
					//提单号
					orderNum: "",
				},
				//查询条件初始值
				carSelectS: {
					//销售状态
					saleType: "",
					//车辆状态 
					status: "",
					//初次入库起
					enterWarehouseDateStart: "",
					//初次入库止 
					enterWarehouseDateStop: "",
					//车系代码
					carSeriesCode: "",
					//车型代码 
					carModelCode: "",
					//配置代码
					carConfigureCode: "",
					//仓库
					warehouse: "",
					//vin
					vin: "",
					//打印状态
					financeType: "0",
					//提单号
					orderNum: "",
					saleFlag:"",
				},
				//warehouseFormShow: false,
				//校验规则
				Rule: {

				},

				multipleSelection: [],
				companyId: "",

				//树形图查询条件
				dictTreeSearchValue: "",
				paramTreeData: [],
				//树型数据配置
				defaultProps: {
					children: 'child',
					label: 'label',
				},
				showStart: false,
				//选中的类型（车型/车系）
				carType: '',
				//选择的车辆信息
				datalabel: '',
				datavale: '',
				//车型名称
				carModelName: "",
				//车型名称
				carModelCode: "",
				//配置的下拉
				configCombo: [],
				//车型的下拉
				modelCombo: [],
				//打印状态的下拉
				prientTypeCombo: [{
					label: '未打印',
					value: '0'
				}, {
					label: '已打印',
					value: '1'
				}, ],
				//销售状态
				saleCombo: [{
					label: '已销售',
					value: '1'
				}, {
					label: '未销售',
					value: '0'
				}, ],
				//待打印的列表
				prientList: [],
				editComFormShowL:false,
				sList:[],
			}
		},
		methods: {
			//清空查询条件
			clean: function() {
				this.$data.carSelect = Object.assign(this.$data.carSelect, this.$data.carSelectS);
				this.$data.data = Object.assign(this.$data.data, this.$data.datas);
				this.$data.carModelCode = "";
				
			},
			//车型改变的回调
			changeModel: function(val) {
				if(val != "") {
					this.comboConfigure(val);
				}
				debugger;
			},
			//车系选择的回调
			insert: function(val, lable) {
				debugger;
				this.$data.carSelect.carSeriesCode = val;
				this.$data.carModelCode = lable;
				this.$http.get(this.API_ROOT + '/base/carModel/combo', {
					params: {
						seriesId: val
					}
				}).then((response) => {
					debugger;
					this.$data.modelCombo = response.data;
					this.$data.carSelect.carModelCode = "";
					this.$data.carSelect.carConfigureCode = "";
					//this.$message(response.data);
				}, (response) => {});
			},
			//选择车型后的回调
			comboConfigure: function(val) {
				this.$http.get(this.API_ROOT + '/base/carConfigure/combo', {
					params: {
						modelId: val
					}
				}).then((response) => {
					debugger;
					this.$data.configCombo = response.data;
					this.$data.carSelect.carConfigureCode = "";
					//this.$message(response.data);
				}, (response) => {});
			},
			//打开车型车系选择
			handleIconClick: function() {
				this.$data.showStart = true;
			},
			//查看调拨审批详情
			infos: function(index) {
				this.$http.get(this.API_ROOT + '/src/carInvoicePrice/getHistoryPrice',{
						params: {
							carId:this.$data.tableData.dataList[index].id
						}
					}).then(resp => {
						if(resp.data.success) {
							debugger;
							this.$data.sList = resp.data.dataList;
							this.$data.editComFormShowL = true;
						} else {}
					}, resp => {})
				debugger;
			},
			//车型车系选择的回调
			//			insert: function(val,lable) {
			//				debugger;
			//				this.$data.condition.carModel = val;
			//				this.$data.carModelName=lable;
			//			},
			//打印验车单
			//销售状态转换
			carSaleStatusCov: function(row, column) {
				return row.saleType == "0" ? '不可售' : '可售';
			},
			typeCov: function(row, column){
				debugger;
				var temp = "";//invoicesType
				switch(row.invoicesType){
					case '1':
						temp = "暂估入库"; 
						break;
					case '2':
						temp = "冲估入库";
						break;
					case '3':
						temp = "正式入库";
						break;
					case '-2':
						temp = "作废冲估";
						break;
					case '-3':
						temp = "作废正式入库";
						break;
					default:
						temp = "无数据";
						break;
				}
				return temp;
			},

			//合格证状态转换
			certificateStatusCov: function(row, column) {
				return this.$data.certificateStatusCovertData[row.certificateStatus];
			},

			certificateStatusCovert: function() {
				this.$http.get(this.API_ROOT + '/base/dict/convert', {
					params: {
						group: "scmCertificateStatus"
					}
				}).then((response) => {
					this.$data.certificateStatusCovertData = response.data;
				}, (response) => {});
			},
			//仓库类型转换
			warehouseTypeCov: function(row, column) {
				return row.warehouseType == "0" ? '虚拟库' : '实体库';
			},
			//是否已售转换
			saleFlagCov: function(row, column) {
				return row.status == "1" ? '未销售' : '已销售';
			},
			//是否已售转换
			validatePrintCov: function(row, column) {
				return row.validateStatus == "0" ? '未打印' : '已打印';
			},
			//财务归属类型转换
			carFinancialBelongCov: function(row, column) {
				return row.financialBelong == "0" ? '本店' : '非本店';
			},
			//打开车型车系选择
			handleIconClick: function() {
				this.$data.showStart = true;
			},
			//查询树节点
			searchTree: function() {
				if(this.$data.dictTreeSearchValue == "") {
					this.$message("请输入查询条件");
					this.queryParamTree();
					return;
				}
				this.$refs.dictTree.filter(this.$data.dictTreeSearchValue);
			},
			//点击资源树节点
			handleNodeClick(data) {
				debugger;
				this.$data.carType = data.type;
				this.$data.datalabel = data.label;
				this.$data.datavale = data.value;
			},
			//查询参数树
			queryParamTree: function() {
				//获取资源树
				debugger;
				this.$http.get(this.API_ROOT + '/base/car/tree', {}).then((response) => {
					this.$data.paramTreeData = response.data;
				}, (response) => {});
			},
			//资源过滤
			filterNode: function(value, data, node) {
				if(!value) return true;
				return data.label.indexOf(value) !== -1;
			},

			//选择框
			handleSelectionChange: function(val) {
				debugger;
				this.$data.multipleSelection = val;
			},
			//查询销售车辆
			query: function() {
				debugger;
				this.$data.carSelect.enterWarehouseDateStart = this.momentFu(this.$data.data.firstStart);
				this.$data.carSelect.enterWarehouseDateStop = this.momentFu(this.$data.data.firstStarts);
				this.$http.post(this.API_ROOT + '/scm/historyCar/page', this.$data.carSelect, {
					params: {
						start: this.$data.CurentPage,
						limit: this.$data.page.pageSize
					}
				}).then(resp => {
					if(resp.data.success) {
						resp.data.total = parseInt(resp.data.total);
						// es5写法
						this.$data.tableData = resp.data;
						//this.baseQuery(this.$data.curTreeDeptId);
						//this.$data.exFormShow = false;
					} else {
						//debugger;
						this.$message.error(resp.data.msg);
					}
				}, resp => {});
			},
			//时间判断为空的封装
			momentFu: function(dt) {
				if(dt == '' || dt == null || dt == undefined) {
					return "";
				} else {
					return this.moment(dt).format("YYYY-MM-DD");
				}
			},
			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				//this.$data.dictGroup = '';
				this.query();
			},
		},
		//表单创建时执行
		created: function() {
			this.query();
			this.certificateStatusCovert();

			//查找车型
			this.queryParamTree();

			//获取仓库类型下拉
			this.$http.get(this.API_ROOT + '/scm/warehouse/combo', {
				params: {
					group: "warehouse"
				}
			}).then((response) => {
				this.$data.warehouseType = response.data;
			}, (response) => {});

			//获取车辆销售状态下拉
			//			this.$http.get(this.API_ROOT + '/base/dict/combo', {
			//				params: {
			//					group: "scmCarSaleStatus"
			//				}
			//			}).then((response) => {
			//				this.$data.saleType = response.data;
			//			}, (response) => {});

		},
		components: {
			carserice
		},
	}
</script>
<style>
	.el-table .info-row {
		height: 10px !important;
	}
	
	.item {
		width: 30px;
	}
	
	.el-form-item {
		clear: both;
	}
	
	.el-dropdown .el-button-group,
	.el-table .el-tooltip,
	.el-table .el-tooltip__rel {
		display: inline;
	}
	
	.el-table {
		height: 100%;
		width: 100%;
	}
	
	#el-select {
		width: 200px;
	}
</style>